* {padding: 0; margin: 0; font: inherit; color: inherit; box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-overflow-scrolling: touch;
}
body {background: #d3d6d9; -overflow-y: scroll;}
ul, li {list-style: none;}
table {width: 100%;}
table.align td:nth-child(2n-1) {width: 10px; white-space: nowrap;}
table.align td {padding: 4px;}

.fl {float: left;}
.fr {float: right;}
.vm {display: inline-block; height: 100%; vertical-align: middle;}
.c {text-anchor: center;}
.ellipsis {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.glyphicon {cursor: pointer;}
.form-control {-webkit-appearance: none;}

.modal {display: block; background: rgba(0,0,0,.5); overflow: auto;}
.modal-header {}
.modal-header .glyphicon {top: 3px;}

#web-ftp {}
#web-ftp .dir-list {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
#web-ftp .dir-list .dir {width: 300px; height: 300px; position: absolute; left: 20px; top: 20px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,.2); border-radius: 4px; overflow: hidden; transition: .3s all; margin-bottom: 5em;}
#web-ftp .dir-list .dir .gray-title {background: #f1f1f1; height: 34px; border-bottom: 1px solid #ddd; padding: .5em .5em 0 .5em; cursor: move;}
#web-ftp .dir-list .dir .gray-title .fr {margin-left: .3em;}
#web-ftp .dir-list .dir .gray-title .fr .glyphicon {margin-left: .3em;}
#web-ftp .dir-list .dir .gray-title .path-box {overflow: hidden;}
#web-ftp .dir-list .dir .gray-title .path-box .form-control {padding: 0; height: 1.5em; line-height: 1.5em; border-radius: 0px; text-indent: 0; background: transparent; border-color: transparent; box-shadow: none; cursor: inherit;
  transition: .15s all;
}
#web-ftp .dir-list .dir .gray-title .path-box .form-control:focus {background: #fff; border-color: #ddd; text-indent: .2em; cursor: text;}
#web-ftp .dir-list .dir .auto-scroll {position: absolute; left: 0; top: 34px; right: 0; bottom: 0; overflow: auto; z-index: 1;}
#web-ftp .dir-list .dir .auto-scroll .file-list {text-align: center; word-break: break-all; padding-bottom: 5em; overflow: hidden; margin-bottom: 0; min-height: 100%; padding-right: 5px;}
#web-ftp .dir-list .dir .auto-scroll .file-list .file {width: 75px; height: 75px; float: left; margin: 5px 0 0 5px; padding-top: .4em; border: 1px solid transparent;}
#web-ftp .dir-list .dir .auto-scroll .file-list .file:hover {background: rgb(229,243,255);}
#web-ftp .dir-list .dir .auto-scroll .file-list .file:active {background: rgb(216,234,255);}
#web-ftp .dir-list .dir .auto-scroll .file-list .file[draggable=true] {background: #ddd; border-color: #ccc;}
#web-ftp .dir-list .dir .auto-scroll .file-list .file .glyphicon {font-size: 28px; cursor: inherit;}
#web-ftp .dir-list .dir .auto-scroll .file-list .file[is-dir=true] .glyphicon:before {color: #fd5;}
#web-ftp .dir-list .dir .auto-scroll .file-list .file .file-name {line-height: 1.4em; max-height: 2.8em; font-size: 12px; overflow: hidden; padding: 0 .2em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
#web-ftp .dir-list .dir.cur .auto-scroll .file-list .file[draggable=true] {background: rgb(204,232,255); border-color: rgb(153,209,255);}
/* #web-ftp .dir-list .dir {opacity: .9;}
#web-ftp .dir-list .dir.cur {opacity: 1;} */
#web-ftp .dir-list .dir.dragover {background: #f3f6f9;}
#web-ftp .dir-list .dir .auto-scroll .file-list .file.cut {opacity: .75;}

#web-ftp .dir-list .dir .resize {}
#web-ftp .dir-list .dir .resize > div > div {width: 6px; height: 6px; position: absolute; left: 0; top: 0; background: url(http://codding.cn/blank.php); z-index: 2;}
#web-ftp .dir-list .dir .resize .line > div {}
#web-ftp .dir-list .dir .resize .line .l {height: 100%; cursor: w-resize;}
#web-ftp .dir-list .dir .resize .line .t {width: 100%; cursor: n-resize;}
#web-ftp .dir-list .dir .resize .line .r {height: 100%; left: auto; right: 0; cursor: e-resize;}
#web-ftp .dir-list .dir .resize .line .b {width: 100%; top: auto; bottom: 0; cursor: s-resize;}
#web-ftp .dir-list .dir .resize .corner > div {width: 12px; height: 12px;}
#web-ftp .dir-list .dir .resize .corner .lt {cursor: nw-resize;}
#web-ftp .dir-list .dir .resize .corner .rt {left: auto; right: 0; cursor: ne-resize;}
#web-ftp .dir-list .dir .resize .corner .rb {left: auto; right: 0; top: auto; bottom: 0; cursor: se-resize;}
#web-ftp .dir-list .dir .resize .corner .lb {top: auto; bottom: 0; cursor: sw-resize;}

#web-ftp .select-rect {width: 100px; height: 100px; position: absolute; left: 50px; top: 50px; background: rgba(0,170,255,.5); border: 1px solid #09f;}
#web-ftp .ctrl-btn {position: fixed; right: 20px; bottom: 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
#web-ftp .ctrl-btn .btn {margin-left: 5px;}

#modal-config .app-list {}
#modal-config .app-list section {margin-bottom: 20px;}
#modal-config .app-list section:last-child {margin-bottom: 0;}
#modal-config .app-list section table {}
#modal-config .app-list section table .text-right {}
#modal-config .app-list section table .text-right .btn {margin-left: 5px;}

#table-upload-err-report {}
#table-upload-err-report td {padding: 3px 0;}
#table-upload-err-report td:nth-child(2n-1) {text-align: right;}


/* loading */
@keyframes loading-rotate-x {
  0% {transform: rotateY(0deg);}
  100% {transform: rotateY(360deg);}
}
@keyframes loading-rotate-y {
  0% {transform: rotateX(0deg);}
  100% {transform: rotateX(360deg);}
}
#loading {width: 100%; height: 100%; position: fixed; left: 0; top: 0; background: radial-gradient(rgba(0,0,0,.3), rgba(0,0,0,.75));
  display: -webkit-box; 
  -webkit-box-pack: center; 
  white-space: nowrap;
  -webkit-box-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  transform-style: preserve-3d;
  transform: perspective(600px);
}
#loading * {
  transform-style: preserve-3d;
}
#loading .box {text-align: center; color: #fff; -background: rgba(255,0,0,.2);}
#loading .box .ball {width: 60px; height: 60px; position: relative; background: -rgba(0,0,0,.2); margin-bottom: 10px; z-index: 10;
  transform: rotate(-45deg);
}
#loading .box .ball ul ,
#loading .box .ball ul li {width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
#loading .box .ball ul li {border: 1px solid #fff; border-radius: 50%;}
#loading .box .ball ul.h {animation: 4s loading-rotate-y linear infinite;}
#loading .box .ball ul.v {animation: 4s loading-rotate-x linear infinite;}

/* 图片浏览插件 */
.free-view {width: 100%; height: 100%; position: fixed; left: 0; top: 0; background: rgba(0,0,0,.9); display: flex; flex-direction: column; color: #ddd;}
.free-view .topbar {width: 100%; height: 50px; background: #111; position: relative; z-index: 2;}
.free-view .topbar .fr {height: 100%; font-size: 1.5em;}
.free-view .topbar .fr .glyphicon {border-left: 1px solid #444; padding: 0 1em; float: left; height: 49px; line-height: 49px;}
.free-view .topbar .pathname {padding: 0 1em; line-height: 50px;}

.free-view .img-view {width: 100%; position: absolute; top: 55px; bottom: 80px; text-align-last: center; vertical-align: middle; white-space: nowrap;}
.free-view .img-view img  {flex: 1; max-width: 100%; max-height: 100%;}
.free-view .thumb-list {height: 80px; overflow: hidden; width: 100%; height: 80px; position: absolute; left: 0; bottom: 0;}
.free-view .thumb-list ul {white-space: nowrap; position: absolute; left: 50%; top: 5px; margin-left: -35px;}
.free-view .thumb-list ul li {width: 70px; height: 70px; display: inline-block; margin-right: 5px; border: 1px solid #ccc; opacity: .5; background: #fff no-repeat center / cover;}
.free-view .thumb-list ul li.on {opacity: 1;}

/* 右键菜单 */
#menu {min-width: 80px; position: fixed; left: 50px; top: 100px; z-index: 100; background: #fff; border-radius: 4px; box-shadow: 0 4px 15px rgba(0,0,0,.3); color: #555; white-space: nowrap; display: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
#menu ul {padding: 8px 0; margin-bottom: 0;}
#menu ul li {padding: 4px 15px; cursor: pointer;}
#menu ul li:hover {background: #337ab7; color: #fff;}

.fade-enter-active {animation: fade-in .4s;}
.fade-leave-active {animation: fade-in .3s reverse;}
@keyframes fade-in {
  0% {opacity: 0;}
  100% {opacity: 1;}
}